import { forwardRef, useImperativeHandle, useRef, useState } from 'react'

import { ChartResizeRef } from '../data'
import type { SwitchAndIntervalRef } from '../interface'
import DriverPie from './DriverPie'
import PersonJobPie from './PersonJobPie'

const LargeScreenLeftContent = forwardRef<SwitchAndIntervalRef, any>(
  (props: any, ref) => {
    const PersonJobPieRef = useRef<ChartResizeRef>(null)
    const [pieEndTotalDirvers, setPieEndTotalDirvers] = useState<number>(0)
    const driverPieRef = useRef<SwitchAndIntervalRef>(null)

    useImperativeHandle(ref, () => ({
      switchAssociation: (newAssociationId) => {
        driverPieRef.current!.switchAssociation(newAssociationId)
      },
      intervalRefresh: () => {
        driverPieRef.current!.intervalRefresh()
      },
      resize: () => {
        if (PersonJobPieRef.current) {
          PersonJobPieRef.current.resize()
        }
        if (driverPieRef.current) {
          driverPieRef.current.resize?.()
        }
      }
    }))

    return (
      <div
        style={{
          height: 960,
          display: 'flex',
          flexDirection: 'column',
          gap: 24
        }}
      >
        <PersonJobPie
          ref={PersonJobPieRef}
          pieEndTotalDirvers={pieEndTotalDirvers}
        ></PersonJobPie>
        <DriverPie
          ref={driverPieRef}
          updateEndTotalDirvers={setPieEndTotalDirvers}
        ></DriverPie>
      </div>
    )
  }
)

export default LargeScreenLeftContent
